<template>
  <div class="article-list">
    <van-list @load="getListData"  v-model="isLoading" :error.sync="isError"  :finished="isFinished">
    	<van-swipe-cell v-for="item in list" :key="item.id"  :disabled="disableSwiper">
        <van-cell  center :to="{path:'/show',query:{id:item.id}}">
          <h3 slot="title" class="list-title">{{item.title}}</h3>
          <div slot="label" class="list-desc">
            <p>
              {{item.content}}
            </p>
            <p class="desc">
              <span><van-icon name="eye" />收藏({{item.lovenum}})</span>
              <span><van-icon name="good-job" />点赞({{item.click}})</span>
            </p>
          </div>
          <img class="list-img" :src="'http://124.223.14.236:8060/'+item.pic" alt="" />
        </van-cell>
        <template #right>
            <slot></slot>
          </template>
			</van-swipe-cell>
    </van-list>
		</div>
</template>

<script>
import { listApi } from '@/api/index.js'
export default {
  name:'ArticleList',
  data() {
    return {
      isLoading: false,
      isFinished:false,
      list:[],
      isError:false,
      page:1
    }
  },
  props:{
    // 是否禁止滑动
    disableSwiper:{
      type:Boolean,
      default:true
    },
    cateId:[String,Number]
  },
  methods: {
   async getListData() {
      try {
        let { data } = await listApi({
        cateid:this.cateId,
        page:this.page
      })
      this.list.push(...data.data.list.data)
      if(this.list.length === data.data.list.count){
        this.isFinished = true
      }else{
        this.page ++
      }
      } catch (error) {
       this.isError = true 
      } finally {
        this.isLoading = false
      }
    }
  },
}
</script>
<style scoped lang="less">
.article-list{
  margin-top: 10px;
  .list-title {
    font-size: 32px;
    color: #222;
    font-weight: normal;
  }
  .list-desc {
    font-size: 28px;
    .desc {
      color: #aaa;
      font-size: 24px;
      span {
        margin-right: 20px;
      }
    }
  }
  /deep/  .van-swipe-cell__value {
    width: 260px;
    flex: unset;
  }
  .list-img {
    width: 240px;
  }
  /deep/ .van-swipe-cell__right{
    .van-button{
      height: 100%;
    }
  }
}
</style>